<!DOCTYPE html> 
<html> 
<head> 
	<title>StubHub</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet"  href="css/jquery.mobile-1.2.0.css" />  
	<link rel="stylesheet" href="css/jqm-docs.css"/>
	<link rel="stylesheet" href="css/common.css"/>
	
	<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=true"></script>

	<script src="jsfiles/jquery.js"></script>
	<script src="jsfiles/jqm-docs.js"></script>
	<script src="jsfiles/jquery.mobile-1.2.0.js"></script>
	<script src="jsfiles/common.js"></script>
	
	<script src="jsfiles/css_browser_selector.js"></script>
	<script>		
		 window.onload = function()
		 {
			getCity();
			getData();
			if (navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/)) {
				$('.Wrapper').css("width","100%");
			} 
			
		 };


	</script>
</head> 
<body> 
	<div id="mainWrapper">
		<div id="Wrapper" class="Wrapper" >
			
			<div style="" class="header1">
				<img style="float:left; margin-top:8px;margin-left:6px;" src="images/banner.png"/>
				<div style="padding-top:6px;" class="header1">
					<a style="float:right;" class="" href="search.html" data-theme="b" data-role="button" data-icon="search" data-transition="slideup"></a>
					<a style="" class="cityName" href="home.html" data-theme="b" data-role="button" data-mini="true" data-transition="slidedown"><span id="cityName"></span></a>
				</div>
		
				<div id="navigation">
					<a style="float:left; width:120px; margin-left:10px;" href="" data-theme="c" data-role="button" data-mini="" data-transition="slideup" data-icon="arrow-l" onClick="backButton(), window.location='home.html'">Back</a>

					<a style="float:right; margin-right:10px;" data-theme="c" data-role="button" data-mini="true" data-transition="slideup" onClick="onLocation()"><img src="images/07-map-marker.png"></a>
					<a style="float:right; margin-right:10px;" data-theme="c" data-role="button" data-mini="true" data-transition="slideup" onClick="onMap()"><img src="images/193-location-arrow.png"></a>
					<a style="float:right; margin-right:10px;" data-theme="c" data-role="button" data-mini="true" data-transition="slideup" onClick="onShare()"><img src="images/145-persondot.png"></a>
				</div>
			</div>

			<div id="Content" style="padding-top:60px;">
				<div id="" class="bookingDetails" style="padding-top:10px; padding-left:20px; height:76px;">
					<b><span id="Title" style="font-size:18px;"></span></b><br>
					<span id="Venue" style="color:#fff"></span><br>
					<span id="Time" style="color:#fff"></span>
				</div>
				<div id="contentTable">
					<ul data-role="listview" data-theme="d" data-divider-theme="d">
						<li data-role="list-divider">
							<table style="width:98%">
								<tr style="height:27px;">
									<td style="width:25%; padding-left:15px;"><b>Section</b></td>
									<td style="width:75%; padding-left:15px;"><span id="Section"></span><span  style="visibility:hidden" id="Avail_seats"></span><span style="visibility:hidden" id="Zone"></span></td>
								</tr>
							</table> 
						</li>
						<li data-role="list-divider">
							<table style="width:98%">
								<tr style="background-color:#E0E0E0; height:27px;">
									<td style="width:25%; padding-left:15px;"><b>Row</b></td>
									<td style="width:75%; padding-left:15px;"><span id="Row"></td>
								</tr>
							</table> 
						</li>
						<li data-role="list-divider">
							<table style="width:98%">
								<tr style="height:27px;">
									<td style="width:25%; padding-left:15px;"><b>Seats</b></td>
									<td style="width:75%; padding-left:15px;"><span id="Seats"></span><br>Your seats will be together.</td>
								</tr>
							</table> 
						</li>
						<li data-role="list-divider">
							<table style="width:98%">
								<tr style="background-color:#E0E0E0; height:27px;">
									<td style="width:25%; padding-left:15px;"><b>Quantity</b></td>
									<td style="width:75%; padding-left:15px;">
										<div style="width:20%;">
											<select name="select-choice-0" id="Quantity" >
											   <option value="">Select</option>
											   <option value="1">1</option>
											   <option value="2">2</option>
											   <option value="3">3</option>
											   <option value="4">4</option>
											   <option value="5">5</option>
											   <option value="6">6</option>
											   <option value="7">7</option>
											   <option value="8">8</option>
											   <option value="9">9</option>
											   <option value="10">10</option>
											</select>
										</div>
									</td>
								</tr>
							</table> 
						</li>
						<li data-role="list-divider">
							<table style="width:98%">
								<tr style="height:27px;">
									<td style="width:25%; padding-left:15px;"><b>Price per ticket</b></td>
									<td style="width:75%; padding-left:15px;"><span id="Price"></span>+ service fee*<br><i>*up to 10% of total ticket price or $5 minimum, where applicable</i></td>
								</tr>
							</table> 
						</li>
						<li data-role="list-divider">
							<table style="width:98%">
								<tr style="background-color:#E0E0E0; height:27px;">
									<td style="width:25%; padding-left:15px;"><b>Ticket features</b></td>
									<td style="width:75%; padding-left:15px;">None provided by seller</td>
								</tr>
							</table> 
						</li>
						<li data-role="list-divider">
							<table style="width:98%">
								<tr style="height:27px;">
									<td style="width:25%; padding-left:15px;"><b>Seller Comments</b></td>
									<td style="width:75%; padding-left:15px;">None provided by seller</td>
								</tr>
							</table> 
						</li>
						<li data-role="list-divider">
							<table style="width:98%">
								<tr style="background-color:#E0E0E0; height:27px;">
									<td style="width:25%; padding-left:15px;"><b>Delivery options</b></td>
									<td style="width:75%; padding-left:15px;">We'll show you delivery options at checkout</td>
								</tr>
							</table> 
						</li>
					</ul>
				</div>
				<div id="nextButton" style="margin-top:30px;">
					<a class="bookingDetails" style="width:70px; margin-left:auto; margin-right:auto; color:#fff;" href="" data-role="button" data-mini="true" onClick="assignQuantity(), window.location='signUp.html'">Next</a>
				</div>
			</div>

			<div id="Share" style="width:100%; display:none; padding-top:140px;">
				<a style="width:30%; margin-left:30px;" data-theme="c" data-role="button" data-mini="true" data-transition="slideup" href="bookTicket.html">Back to Booking Details</a>
				<a style="width:80%; margin-left:auto; margin-right:auto; margin-top:30px;" data-theme="b" data-role="button" data-mini="true" data-transition="slideup" href="http://www.facebook.com" target="_blank">Share on Facebook</a>
				<a style="width:80%; margin-left:auto; margin-right:auto" data-theme="b" data-role="button" data-mini="true" data-transition="slideup" href="http://www.twitter.com" target="_blank">Share on Twitter</a>
				<a style="width:80%; margin-left:auto; margin-right:auto" data-theme="b" data-role="button" data-mini="true" data-transition="slideup" href="mailto:?subject=Checkout this mobile App &body=You can paste the link here so that user can directly go to that link......">Email your friends</a>
			</div>
			<div id="Location" style="display:none; padding:140px;">
				<a style="width:30%; margin-left:30px;" data-theme="c" data-role="button" data-mini="true" data-transition="slideup" href="bookTicket.html">Back to Booking Details</a>
				<img style="height:600px; width:900px; margin-left:auto; margin-right:auto;  margin-top:30px;" src="images/location.png">
			</div>
			<div id="Map" style="visibility:hidden; padding-top:140px; margin-left:60px;">
				<a style="width:30%; margin-left:30px;" data-theme="c" data-role="button" data-mini="true" data-transition="slideup" href="bookTicket.html">Back to Booking Details</a>
				<div id="googleMap" style="width:95%; height:500px; margin-top:30px;"></div>
			</div>

		</div>				
	</div>
</body>
</html>